<template>
    <div class="msg-edit">
        <div class="header">
            <p>编辑消息</p>
            <el-button class="link" type="primary">
                <router-link to="/msgList" style="color: #fff;">返回</router-link>
            </el-button>
        </div>
        <div class="main">
            <el-form :model="information" :rules="rules" ref="information" label-width="120px" class="">
                <el-form-item label="消息标题：" prop="title">
                    <el-input v-model="information.title" placeholder="请输入消息标题"></el-input>
                </el-form-item>
                <el-form-item label="消息内容：" prop="content">
                    <bg-editor
                            :minHeight="300"
                            :uploadUrl="upLoadUrl"
                            :content="information.content"
                            @editorData='editorInfo'>
                    </bg-editor>
                </el-form-item>
                <el-form-item label="发送时间：" prop="">
                    <el-date-picker
                            v-model="sendTime"
                            type="datetime"
                            placeholder=""
                            disabled>
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('information')" >推送</el-button>
                    <el-button @click="handleEmpty" type="primary" >重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    let CONSTANT = require('../../constant/constant.js');
    let common = require("../../common.js");
    export default {
        data() {
            return {
                id:'',
                upLoadUrl:'',
                dialogImageUrl:'',
                information: {
                    id:'',
                    content: '' ,
                    title : '' ,
                },
                sendTime: "",
                uploadState:false,
                dialogVisible:false,
                fileShowList:[],
                rules: {
                    title: [
                        { required: true, message: '请输入消息标题', trigger: 'blur' },
                        { min: 1, max: 30, message: '长度在 1 到 30 个字', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请输入消息内容', trigger: 'blur' }
                    ],
                },
                typeArr:[
                    {
                        item:'1',
                        value:'LD福利'
                    },{
                        item:'2',
                        value:'LD互动'
                    },{
                        item:'3',
                        value:'LD故事'
                    }
                ],
                imageUrl:'',
                sortArr:[],
                sortArr1:[]
            };
        },
        components:{
            'bg-editor':()=>import('../common/bg-editor.vue')
        },
        watch:{

        },
        created(){
        },
        mounted() {
            this.sendTime = new Date()
            this.id = this.$router.currentRoute.query.id;
            if(this.id){
                this.getDetail();
            }
        },
        methods: {
            beforeAvatarUpload(file) {
                console.log(file);
                const isLt2M = file.size / 1024 / 1024 < 2;
                let url =CONSTANT.URL.COMMON.UPLOAD;
                let param = {
                    suffix:file.name.split(".")[1],   // 文件后缀  png
                    contentType:file.type             // 文件类型  image/png
                }
                common.requestAjax(url,param,null,(res)=> {
                    this.upLoadUrl = res.data.bussData.uploadUrl;
                    this.information.picMasterId  = res.data.bussData.fileKey;
                    let downloadUrl =   res.data.bussData.downloadUrl;
                    common.uploadFile(this.upLoadUrl,file,file.type,(res)=>{
                        this.fileShowList.push({
                            url:downloadUrl
                        })
                        this.uploadState = true
                    })
                });
            },

            myUpload(content) {
                // 重写覆盖上传方法
            },
            getDetail:function(){
                let url = CONSTANT.URL.MSG.DETAIL,
                    data={

                    }
                common.requestAjax(url,JSON.stringify(data),{id:this.id},(res)=>{
                    if(res.status == 200){
                        let data = res.data;
                        let info = data.bussData;
                        this.information= {
                            content: info.content,
                            title: info.title
                        };
                    }
                })
            },
            handleRemove(file, fileList) {      // 图片上传
                this.uploadState = false;
                this.fileShowList = [];
                this.information.picMasterId = ''
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleFileSuccess(res, file) {
                if(res.status == 200){
                    let picItem = res.data.bussData;
                    this.information.images.push(picItem);
                    if(this.information.images.length>=8){
                        this.uploadShow = true;
                    }
                }
            },
            editorInfo(val){
                console.log(val)
                this.information.content = val;
            },
            submitForm(formName) {
                console.log(this.information)
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.id) {
                            let url = CONSTANT.URL.MSG.UPDATE;
                            let param = JSON.stringify(Object.assign(this.information, {id: this.id}));
                            common.requestAjax(url, param, null, res => {
                                if(res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '保存成功!'
                                    });
                                    this.$router.push("/msgList");
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: res.msg
                                    });
                                }
                            });
                        } else {
                            let url = CONSTANT.URL.MSG.ADD;
                            let param = JSON.stringify(this.information);
                            common.requestAjax(url, param, null, res => {
                                if(res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '保存成功!'
                                    });
                                    this.$router.push("/msgList");
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: res.msg
                                    });
                                }
                            });
                        }

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleEmpty() {
                this.information = {
                    title: "",
                    content: "",
                }
                $('#summernote').summernote('code','')
            }
        }
    }
</script>

<style lang="scss" scoped >
    .msg-edit {
        .header{
            height: 46px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dedede;
            p{ float: left;height: 36px;line-height: 36px;margin: 0 0 0 10px;font-size: 18px;}
            .el-button{
                float: right;
                margin-right: 5%
            }
        }
        .tip-img{
            font-size: 12px;
            color:red;
        }
        .main {
            // width:500px;
            //max-width: 1500px;
            .el-textarea{
                width: 60%;
            }
            .car-info{
                .car-list{
                    overflow: hidden;
                    .el-form-item{
                        float: left;
                        .el-input,.el-select{
                            width: 150px;
                        }
                    }
                }
            }
            margin: 20px 0 0 40px;
            clear: both;
            .el-input,
            .el-select {
                width: 250px;
            }
            .modal-body{
                .note-image-input{
                    display: block;
                }
            }
        }
    }
</style>
<style>
    .distpicker-address-wrapper select{
        margin-right: 20px;
    }
    .panel-heading{
        position: relative!important;
    }
    .note-toolbar{
        z-index: 10!important;
    }
    .uploadShow  .el-upload{display: none;}
</style>

